<template>
  <Row type="flex" justify="center" align="middle" class-name="user-login">
    <Col>
      <Card style="width:400px;" :padding="40">
        <h1 slot="title" style="padding:20px;text-align:center;">{{appName}}</h1>
        <Form ref="formParams" :model="formParams" :rules="ruleValidate" label-position="top">
          <FormItem prop="username" :label="usernameLable">
            <Input
              v-model="formParams.username"
              size="large"
              clearable
              @keyup.enter.native="handleLogin"
            >
              <Icon type="md-person" slot="prefix" />
            </Input>
          </FormItem>
          <FormItem prop="password" :label="passwordLable">
            <Input
              type="password"
              v-model="formParams.password"
              size="large"
              clearable
              @keyup.enter.native="handleLogin"
            >
              <Icon type="md-lock" slot="prefix" />
            </Input>
          </FormItem>
        </Form>
        <Button
          @click="handleLogin"
          type="primary"
          long
          shape="circle"
          :loading="loading"
          size="large"
        >{{loginLable}}</Button>
      </Card>
    </Col>
  </Row>
</template>
<script>
import { login } from '@/api/user.js'

export default {
  data() {
    return {
      formParams: {
        username: '',
        password: ''
      },
      loading: false
    }
  },
  computed: {
    appName() {
      return this.$config.appName
    },
    usernameLable() {
      return this.$t('views.user.username')
    },
    passwordLable() {
      return this.$t('views.user.password')
    },
    loginLable() {
      return this.$t('views.user.login')
    },
    ruleValidate() {
      return {
        username: [
          { required: true, message: this.$t('views.user.ruleMsg.username.required'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$t('views.user.ruleMsg.password.required'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleLogin() {
      this.$refs.formParams.validate((valid) => {
        if (valid) {
          this.loading = true
          login(this.formParams, data => {
            this.$store.commit('setUserInfo', data.data)
            this.$router.push({ name: this.$config.homeRouteName })
          }, data => {
            this.$Message.error(data.msg)
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="less">
.user-login {
  height: 100%;
  width: 100%;
  background: url("../../../assets/images/email-pattern.png");
}
</style>
